<template>
    <div class="app-container">
      <el-card class="box-card">
        <div class="checkedBox">
          <span>时间：</span>
          <el-date-picker
            v-model="timers"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
			      value-format="yyyy-MM-dd"
            align="right">
          </el-date-picker>
          <span>用户ID：</span>
          <el-input v-model="timers" placeholder="用户ID" class='userCode' />
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </div>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          border
          class="mt-3"
          stripe
          style="width: 100%"
          tooltip-effect="dark"
        >
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="时间" prop="created_at"></el-table-column>
          <el-table-column label="用户ID" prop="user_id"></el-table-column>
          <el-table-column label="用户昵称" prop="nickname"></el-table-column>
          <el-table-column label="押注" prop="cost"></el-table-column>
          <el-table-column label="本期" prop="gifts">
            <template slot-scope="{row}">
                  <span>{{row.gifts.toString()}}</span>
                </template>
          </el-table-column>
          <el-table-column label="出奖" prop="cost"></el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <cus-pagination
        v-show="total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getTableData"
      />
      </el-card>
      
  
    </div>
</template>
  
<script>
    import {  records } from '@/api/mokaCrystal'
  
  	export default {
        name: 'anchorList',
        components: {},
        data() {
        return {
            tableData: [],
			timers: '',
            listQuery: {
              page: 1,
              perPage: 10
            },
            total: 1,
            pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近一个月',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					picker.$emit('pick', [start, end]);
					}
				}, {
					text: '最近三个月',
					onClick(picker) {
					const end = new Date();
					const start = new Date();
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					picker.$emit('pick', [start, end]);
					}
				}]
			},
        }
    },
    created() {
		this.listQuery.pool_id = this.$route.query.poolId
		const date = new Date()
		let month,year,day
		if(date.getDate() - 14 < 0) {
			if(!date.getMonth()) {
				year = date.getFullYear() - 1
				month = 12
				day = new Date(year,month,0).getDate() - (date.getDate() - 14)
			}else {
				year = date.getFullYear()
				month = date.getMonth()
				day = new Date(year,month,0).getDate() + (date.getDate() - 14)
			}
		}else {
			year = date.getFullYear()
			month = date.getMonth() + 1
			day = date.getDate() - 14
		}
		this.listQuery.start = year + '-' + month + '-' + day
		this.listQuery.end = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate()
		console.log(this.listQuery.end)
        this.getTableData()
    },
    methods: {
      handleSearch() {
        if(this.timers) {
          this.listQuery.start = this.timers[0]
          this.listQuery.end = this.timers[1]
        }else {
          this.listQuery.start = undefined
          this.listQuery.end = undefined
        }
        this.listQuery.pool_id = this.$route.query.poolId
        this.getTableData()
      },
      handleReset() {
        this.timers = ''
        this.listQuery.start = undefined
        this.listQuery.end = undefined
      },
    
        // 网络请求
        /**
         * getTableData
         * @desc 获取表格数据
         */
        async getTableData() {
            this.loading = true
            for (let key in this.listQuery) {
                this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
            }
            const detail = await records(this.listQuery)
            if (detail.code === 200) {
                this.tableData = detail.data.data
                this.listQuery.page = detail.data.current_page
                this.total = detail.data.total
                this.listQuery.perPage = Number(detail.data.per_page)
            }
            this.loading = false
    
        }
    }
  }
</script>
  
<style lang="scss" scoped>
::v-deep {
  .userCode{

    &.el-input{
      width: 200px;
      .el-input__inner {
        width: 200px !important;
      }
    }
  }
  .checkedBox{

    .el-input__inner {
      width: 400px !important;
    }
  }
}
</style>
  